<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>视频循环与音频同步修复</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body, html { width: 100%; height: 100%; overflow: hidden; }
        #fullscreen-video {
            position: fixed;
            top: 0; left: 0;
            min-width: 100%; min-height: 100%;
            width: auto; height: auto;
            z-index: -1;
            object-fit: cover;
        }
        #background-audio { display: none; }
        .hint {
            position: fixed;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 1.2rem;
            text-shadow: 0 0 10px #000;
            z-index: 10;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <!-- 全屏循环视频 -->
    <video 
        id="fullscreen-video"
        autoplay 
        muted 
        loop 
        playsinline
    >
        <source src="video.mp4" type="video/mp4">
        浏览器不支持视频播放
    </video>

    <!-- 背景音频（独立循环，不受视频影响） -->
    <audio 
        id="background-audio" 
        loop  <!-- 音频自身循环，与视频循环独立 -->
    >
        <source src="audio.mp3" type="audio/mpeg">
        浏览器不支持音频播放
    </audio>

    <div class="hint">点击屏幕开启声音</div>

    <script>
        const video = document.getElementById('fullscreen-video');
        const audio = document.getElementById('background-audio');
        const hint = document.querySelector('.hint');
        let soundEnabled = false;

        // 点击屏幕开启声音
        document.addEventListener('click', function() {
            if (!soundEnabled) {
                video.muted = false; // 开启视频声音
                audio.muted = false; // 开启音频声音
                audio.play().catch(err => {
                    console.log('音频播放失败:', err);
                });
                hint.style.display = 'none';
                soundEnabled = true;
            }
        });

        // 关键修复：视频循环结束时，确保音频继续播放（不重置/不停止）
        video.addEventListener('ended', function() {
            // 视频自然结束后会触发loop自动重播，此处不干预音频
            if (soundEnabled) {
                // 若音频意外停止，强制重启音频
                if (audio.paused) {
                    audio.play();
                }
            }
        });

        // 页面加载时预加载音频
        window.addEventListener('load', function() {
            audio.load(); // 预加载音频，避免点击时延迟
        });
    </script>
</body>
</html>
